<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-address-container">
			<view class="goshop-address-item goshop-address-item-bottom">
				<view class="goshop-address-item-left">
					{{receiverText}}
				</view>
				<view class="goshop-address-item-right">
					<u--input
						v-model="form.consignee"
					    border="none"
					    :placeholder="fillreceiverText"
					  ></u--input>
				</view>
			</view>
			<view class="goshop-address-item goshop-address-item-bottom">
				<view class="goshop-address-item-left">
					{{mobileText}}
				</view>
				<view class="goshop-address-item-right">
					<u--input
						v-model="form.mobile"
					    border="none"
					    :placeholder="fillmobileText"
					  ></u--input>
				</view>
			</view>
			<view v-if="locale ==='zh-Hans'" class="goshop-address-item goshop-address-item-bottom" @tap="showArea = true; hideKeyboard()">
				<view class="goshop-address-item-left">
					{{yourregionText}}
				</view>
				<view class="goshop-address-item-right">
					<view v-if="form.province || form.city || form.area">
						{{form.province}}-{{form.city}}-{{form.area}}
					</view>
				</view>
			</view>
			<view class="goshop-address-item goshop-address-item-bottom">
				<view class="goshop-address-item-left">
					{{detailText}}
				</view>
				<view class="goshop-address-item-right">
					<u--input
						v-model="form.address"
					    border="none"
					    :placeholder="filldetailText"
					  ></u--input>
				</view>
			</view>
			<view class="goshop-address-item goshop-address-item-bottom">
				<view class="goshop-address-item-left">
					{{defText}}
				</view>
				<view class="goshop-address-item-right">
					<view style="width: 100%;display: flex;align-items: center;justify-content: flex-end;">
						<u-switch activeValue="1" inactiveValue="0" v-model="form.defaultStatus" @change="defAddress"></u-switch>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-20">
			<u-button type="error" @click="submitForm" :text="submitText"></u-button>
		</view>
		<u-picker :show="showArea" @cancel="showArea=false" ref="uPicker" class="uPicker" :columns="addressColumns" @confirm="addressConfirm" @change="changeHandler" :defaultIndex="defaultAddress"></u-picker>
	</view>
</template>

<script>
	import city from '@/utils/area';
	import {isEmpty} from '@/utils/utils';
	import {createAddress,updateAddress,addressInfo} from '@/common/http.api.js'
	export default {
		data() {
			return {
				defaultAddress: [],
				addressColumns: [],
				addressData:[],
				area:'',
				showArea: false,  // picker是否展示
				form:{
					id:'',
					area:'',
					defaultStatus:'0',
					province:'',
					city:'',
					consignee:'',
					mobile:'',
					address:'',
					locale:'',
				},
				consigneenotemptyText:'',
				errorText:'',
				idnotemptyText:'',
				detailnotemptyText:'',
				mobileText:'',
				areanotemptyText:'',
				defText:'',
				fillmobileText:'',
				updateText:'',
				yourregionText:'',
				detailText:'',
				fillreceiverText:'',
				failText:'',
				mobilenotemptyText:'',
				receiverText:'',
				filldetailText:'',
				successText:'',
				submitText:'',
				locale:'',
			};
		},
		onLoad(e){
			//uni.setNavigationBarTitle({title:options.name})
			if(e.id){
				this.form.id = e.id;
				this.getAddressInfo();
			}
			this.handleArea();
		},
		onShow(){
		   this.refresh();
		   this.locale = this.$i18n.locale;
		   this.form.locale = this.$i18n.locale;
		},
		methods:{
			refresh(){
				this.consigneenotemptyText = this.$t('addressedit.consigneenotempty.text');
				this.errorText = this.$t('addressedit.error.text');
				this.idnotemptyText = this.$t('addressedit.idnotempty.text');
				this.detailnotemptyText = this.$t('addressedit.detailnotempty.text');
				this.mobileText = this.$t('addressedit.mobile.text');
				this.areanotemptyText = this.$t('addressedit.areanotempty.text');
				this.defText = this.$t('addressedit.def.text');
				this.fillmobileText = this.$t('addressedit.fillmobile.text');
				this.updateText = this.$t('addressedit.update.text');
				this.yourregionText = this.$t('addressedit.yourregion.text');
				this.detailText = this.$t('addressedit.detail.text');
				this.fillreceiverText = this.$t('addressedit.fillreceiver.text');
				this.failText = this.$t('addressedit.fail.text');
				this.mobilenotemptyText = this.$t('addressedit.mobilenotempty.text');
				this.receiverText = this.$t('addressedit.receiver.text');
				this.filldetailText = this.$t('addressedit.filldetail.text');
				this.successText = this.$t('addressedit.success.text');
				this.submitText = this.$t('addressedit.submit.text');
			},
			getAddressInfo(){
				addressInfo({params: {id: this.form.id},custom: {auth: true}}).then(res => {
					if (res.code === 0) {
						this.form = res.data;
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			defAddress(e){
				console.log('change', e);
			},
			handleArea(){
				let {
					provinceData,
						cityData,
						areaData
					} = city;
				let arr=[];
				let province=[];
				let arr1=[];
				let arr2=[];
				provinceData.forEach((item, index) => {
					arr.push({
						...item,
						children: []
					});
					arr[index].children.push(...cityData[index]);
					arr[index].children.forEach((item1, index1) => {
						item1['children'] = [];
						item1.children.push(...areaData[index][index1]);
						
					});
				});
				province=arr.map(e=>{return e.label});
				arr1=arr[0].children.map(e=>{return e.label});
				arr2=arr[0].children[0].children.map(e=>{return e.label});
				this.addressColumns=[province,arr1,arr2]
				this.addressData=arr;
			},
			changeHandler(e) {
				const {
						columnIndex,
						value,
						values, // values为当前变化列的数组内容
						index,
						indexs,
						// 微信小程序无法将picker实例传出来，只能通过ref操作
						picker = this.$refs.uPicker
					} = e
					// 当第一列值发生变化时，变化第二列(后一列)对应的选项
					if (columnIndex === 0) {
						// picker为选择器this实例，变化第二列对应的选项
						let children1=this.addressData[index].children.map(e=>{return e.label})
						picker.setColumnValues(1, children1)
						// console.log(this.addressData[index].children[indexs[1]].children)
						let children2=this.addressData[index].children[indexs[1]].children.map(e=>{return e.label})
						picker.setColumnValues(2, children2)
					}
					if (columnIndex === 1) {
						// console.log("index",index,"indexs",indexs)
						let children3=this.addressData[indexs[0]].children[indexs[1]].children.map(e=>{return e.label})
						picker.setColumnValues(2, children3)
					}
			},
			addressConfirm(e) {
				this.showArea=false;
				this.form.province = e.value[0];
				this.form.city = e.value[1];
				this.form.area = e.value[2];
				debugger
				//this.form.area=`${e.value[0]}-${e.value[1]}-${e.value[2]}`
			},
			submitForm(){
				let that = this;
				if(isEmpty(this.form.consignee)){
					this.$refs.uToast.show({
						message: that.consigneenotemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.mobile)){
					this.$refs.uToast.show({
						message: that.mobilenotemptyText,
						type: 'error',
					})
					return;
				}
				if(this.locale ==='zh-Hans'){
					if(isEmpty(this.form.province) || isEmpty(this.form.city) || isEmpty(this.form.area)){
						this.$refs.uToast.show({
							message: that.areanotemptyText,
							type: 'error',
						})
						return;
					}
				}
				if(isEmpty(this.form.address)){
					this.$refs.uToast.show({
						message: that.detailnotemptyText,
						type: 'error',
					})
					return;
				}
				if(this.form.id){
					if(isEmpty(this.form.id)){
						this.$refs.uToast.show({
							message: that.idnotemptyText,
							type: 'error',
						})
						return;
					}
					updateAddress(this.form).then(res => {
						if (res.code === 0) {
							debugger
							this.sending = true;
							this.$refs.uToast.show({
								message: that.updateText,
								type: 'success'
							})
							uni.hideLoading();
							setTimeout(() => {
								const pages = getCurrentPages();//获取页面栈
								const beforePage = pages[pages.length - 2];//前一个页面
								uni.navigateBack({
									delta: 1,
									success: function() {
									   debugger
									   beforePage.$vm.refresh(); //前一个页面方法
									}
								});
							}, 500);
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: that.failText,
								content: res.msg,
							});
						}
					});
				}else{
					createAddress(this.form).then(res => {
						if (res.code === 0) {
							debugger
							this.sending = true;
							this.$refs.uToast.show({
								message: that.successText,
								type: 'success'
							})
							uni.hideLoading();
							setTimeout(() => {
								const pages = getCurrentPages();//获取页面栈
								const beforePage = pages[pages.length - 2];//前一个页面
								uni.navigateBack({
									delta: 1,
									success: function() {
									   beforePage.$vm.refresh(); //前一个页面方法
									}
								});
							}, 500);
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: that.errorText,
								content: res.msg,
							});
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.goshop-address-container{
	background-color: $goshop-color-auxiliary-one;
	padding: 0 20rpx;
	.goshop-address-item-bottom{
		border-bottom: 2rpx solid $goshop-text-color-three;
	}
	.goshop-address-item{
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.goshop-address-item-left{
			
		}
		.goshop-address-item-right{
			flex: 3;
			padding-left: 20rpx;
		}
	}
}
</style>
